<template>
  <div class="outPageBox">
    <div class="outPageBox-head">
      <div class="outPageBox-head-content">
        <div class="outPageBox-head-left">
          <span>￥</span>
          <span>{{ detail.rpAmt }}</span>
        </div>
        <div class="outPageBox-head-right">
          <div>分分联红包 {{ detail.rpAmt }}元</div>
          <div>
            有效期至
            <span v-if="detail.exType === 2">长期有效</span>
            <span v-else
              >{{ detail.exStartTime }}<strong style="margin: 0 5px">至</strong
              >{{ detail.exEndTime }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="outPageBox-body">
      <span>兑换数量</span>
      <el-input-number
        v-model="num"
        :min="0"
        :max="pointDetail.max"
      ></el-input-number>
    </div>
    <div class="outPageBox-foot1">
      <span>售价：</span>
      <span>{{ detail.score }}</span>
      <span>积分</span>
    </div>
    <div class="outPageBox-foot2">
      <span>剩余积分数：</span>
      <span>{{ pointDetail.points }}</span>
      <span>积分</span>
    </div>
    <div class="outPageBox-foot3">
      <span>小计：</span>
      <span>{{ detail.score * num }}</span>
      <span>积分</span>
    </div>
    <div class="outPageBox-bottom">
      <div class="outPageBox-bottom-left">
        <span>{{ detail.score * num }}</span>
        <span>积分</span>
      </div>
      <div
        :class="
          load ? `active outPageBox-bottom-right` : `outPageBox-bottom-right`
        "
        @click="showPopup"
      >
        {{ load ? "下单中..." : "立即兑换" }}
      </div>
    </div>
    <Bottom-Popup
      :show="show"
      :orderReturnDetail="orderReturnDetail"
      :phone="pointDetail.phone"
      :detail="detail"
      position="bottom"
      :round="true"
      :closeable="true"
      closePosition="top-left"
      @closePopup="closePopup"
      @redirectTo="redirect"
      :style="{ height: '70%', background: '#F2F2F4' }"
    />
  </div>
</template>
<script>
import bottomPopup from "@/components/show-popup";
import { createOrder } from "@/api/score";
import { Toast } from "vant";
export default {
  name: "orderDetail",
  components: {
    "Bottom-Popup": bottomPopup,
  },
  data() {
    return {
      num: 0,
      show: false,
      detail: {},
      pointDetail: {
        phone: "",
        fingerprint: "",
        points: "",
        max: "",
      },
      load: false,
      orderReturnDetail: {},
    };
  },
  created() {
    const obj = localStorage.getItem("shopDetail");
    if (obj) {
      this.detail = JSON.parse(obj);
      const local = localStorage.getItem("scoreDetail");
      const result = JSON.parse(local);
      const max = parseInt(result.points / this.detail.score);
      this.pointDetail = {
        phone: result.phone,
        fingerprint: result.fingerprint,
        points: result.points,
        max: max,
      };
    }
  },
  methods: {
    showPopup() {
      if (this.num === 0) {
        Toast.fail({ message: "请选择兑换数量", icon: "none" });
        return;
      }
      const { phone, fingerprint } = this.pointDetail;
      const { id } = this.detail;
      this.load = true;
      const params = {
        redpacketId: id,
        total: this.num,
        fingerprint: fingerprint,
        exPhone: phone,
      };
      createOrder({ ...params })
        .then((res) => {
          const { status, message } = res.data;
          this.load = false;
          this.orderReturnDetail = {
            ...res.data,
            fingerprint: fingerprint,
            redpacketId: id,
          };
          if (status === 1) {
            this.$nextTick(() => {
              this.show = true;
            });
          } else {
            Toast.fail({ message: `${message}`, icon: "none" });
          }
        })
        .catch((error) => {
          this.load = false;
        });
    },
    closePopup() {
      this.show = false;
    },
    redirect(params) {
      this.$router.push({
        path: "/order-status",
        query: { ...params },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.outPageBox {
  &-head {
    height: 129px;
    background: #fe7a1b;
    padding: 15px 12px;
    box-sizing: border-box;
    &-left {
      flex: 0 0 25%;
      background: linear-gradient(
        182.57deg,
        rgba(255, 153, 96, 0.1) 0.71%,
        rgba(255, 109, 63, 0.1) 96.41%
      );
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ff5c00;
      span:first-child {
        font-weight: 400;
        font-size: 12px;
      }
      span:last-child {
        font-weight: 600;
        font-size: 20px;
      }
    }
    &-right {
      flex: 0 0 75%;
      padding: 15px 12px;
      box-sizing: border-box;
      div:first-child {
        font-weight: 600;
        font-size: 14px;
        color: #39394d;
      }
      div:last-child {
        font-weight: 400;
        font-size: 10px;
        color: #606265;
        margin-top: 15px;
      }
    }
    &-content {
      width: 100%;
      height: 99px;
      background: #ffffff;
      box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      display: flex;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        width: 16px;
        height: 16px;
        background: #fe7a1b;
        right: -8px;
        display: inline-block;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 16px;
      }
    }
  }
  &-body {
    margin: 12px;
    padding: 20px 16px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-weight: 400;
      font-size: 16px;
      color: #39394d;
    }
  }
  &-foot3 {
    margin: 0 12px;
    padding: 20px;
    background: #ffffff;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 16px;
    span:first-child,
    span:last-child {
      font-weight: 600;
      font-size: 16px;
      color: #39394d;
    }
    span:nth-child(2) {
      font-weight: 600;
      font-size: 26px;
      color: #39394d;
    }
  }
  &-foot1,
  &-foot2 {
    margin: 0 12px;
    padding: 20px;
    background: #ffffff;
    justify-content: flex-end;
    display: flex;
    border-radius: 8px;
    margin-bottom: 16px;
    span:first-child,
    span:last-child {
      font-weight: 400;
      font-size: 14px;
      color: #909399;
    }
    span:nth-child(2) {
      font-weight: 400;
      font-size: 16px;
      color: #909399;
    }
  }
  &-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 74px;
    background: #ffffff;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    &-left {
      color: #ff5c00;
      span:first-child {
        font-weight: 600;
        font-size: 24px;
      }
      span:last-child {
        font-weight: 400;
        font-size: 10px;
      }
    }
    &-right {
      width: 156px;
      height: 44px;
      border-radius: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 17px;
      color: #ffffff;
      background: linear-gradient(89.96deg, #ff8500 0.02%, #ff5f26 99.95%);
      &:active {
        opacity: 0.5;
      }
    }
  }
}
</style>
